<template>
  <div class="myInfo">
    <el-form ref="form" :model="myInfo" label-width="100px">
      <!--昵称-->
      <el-form-item label="昵称:">
        <el-input v-model="myInfo.nickname" class="input-nickname"></el-input>
        <span>注：修改一次昵称需要消耗6个硬币</span>
      </el-form-item>
      <!--用户名-->
      <el-form-item label="用户名:">
        {{ myInfo.username }}
      </el-form-item>
      <!--出生日期-->
      <el-form-item label="出生日期:">
        <el-date-picker type="date" placeholder="选择日期" v-model="myInfo.birthday" style="width: 300px;"></el-date-picker>
      </el-form-item>
      <!--性别-->
      <el-form-item label="性别:">
        <el-radio-group v-model="myInfo.sex">
          <el-radio label="男" border></el-radio>
          <el-radio label="女" border></el-radio>
          <el-radio label="太监" border></el-radio>
        </el-radio-group>
      </el-form-item>
      <!--个性签名-->
      <el-form-item label="个性签名:">
        <el-input type="textarea" placeholder="设置您的签名- ( ゜- ゜)つロ" v-model="myInfo.signature" :rows="4"></el-input>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <!--按钮-->
    <div class="button">
      <el-button type="primary" @click="validForm">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    <!--修改昵称时提示-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      center
      top="300px"
    >
      <span>您修改了昵称,这将花费6硬币,是否继续?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="saveNicknameInfo">保存</el-button>
    <el-button @click="saveOtherInfo" type="primary">仅修改其他信息</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getUserInfo, saveUserInfo } from '@/api/user'

export default {
  data () {
    return {
      myInfo: {
        nickname: '女枪',
        username: 'mono',
        birthday: new Date(),
        sex: '太监',
        signature: '我就是我,看见不一样的烟火'
      },
      dialogVisible: false
    }
  },
  computed: {
    nickname () {
      return this.$store.getters.nickname
    }
  },
  // created生命周期
  created () {
    this.getUserInfo()
  },
  // 函数
  methods: {
    // 获取用户信息
    async getUserInfo () {
      const res = await getUserInfo(getToken())
      this.myInfo = res.data
      // console.log('/personal/myInfo:用户信息', res)
    },
    // 验证表单
    validForm () {
      // 修改了昵称弹出确认框
      if (this.myInfo.nickname !== this.nickname) {
        this.dialogVisible = true
      } else {
        this.saveInfo()
        this.dialogVisible = false
      }
    },
    // 保存修改信息
    async saveInfo () {
      const res = await saveUserInfo(this.myInfo)
      if (res.code === 200) {
        this.$message.success({
          duration: 1000,
          message: res.message
        })
      }
      this.dialogVisible = false
    },
    // 仅修改其他信息
    saveOtherInfo () {
      this.myInfo.nickname = this.nickname
      this.saveInfo()
    },
    // 修改确认昵称
    saveNicknameInfo () {
      if (this.$store.getters.coin < 6) {
        this.$message.error('硬币不足')
        this.dialogVisible = false
      } else {
        this.$store.dispatch('user/updateCoin', -6)
        this.saveInfo()
      }
    },
    // 重置信息
    async reset () {
      const res = await getUserInfo(getToken())
      this.myInfo = res.data
    }
  }
}
</script>

<style scoped lang="less">
.myInfo {
  padding-right: 20px;

  .input-nickname {
    width: 300px;
    margin-right: 40px;
  }

  .el-divider {
    margin-top: 40px;
  }

  .button {
    display: flex;
    justify-content: center;
  }
}

</style>
